const Koa = require("koa");
const Router = require("koa-router");
const router = new Router();
const app = new Koa();

const Vue = require("vue");
const VueServerRenderer = require("vue-server-renderer");
const fs = require("fs");
const path = require("path");

const vm = new Vue({
  data: {
    name: "seven",
  },
  template: "<div>hello {{name}} </div>",
});

const template = fs.readFileSync(
  path.resolve(__dirname, "template.html"),
  "utf-8"
);

router.get("/", async (ctx) => {
  //   ctx.body = await VueServerRenderer.createRenderer().renderToString(vm);
  // 当用户访问/路径时， 需要将渲染的字符串插入到模板中
  ctx.body = await VueServerRenderer.createRenderer({
    template,
  }).renderToString(vm);
});

app.use(router.routes()); // 将路由注册到应用上

app.listen(3000);

// 真正开发的时候， 我们还是希望 使用.vue文件来进行开发
